<template>
  <div class="mod-config">
    <div class="aside">
      <elTree
        :treeConfig="treeConfig"
        @folder="folderTree"
        @file="fileTree"
        @rechristen="rechristenTree"
        @del="delTree"
      ></elTree>
    </div>
    <div class="main">
      <div class="sql">
        <div class="buttonList">
          <i class="el-icon-printer" @click="setValue"></i>
          <i
            class="el-icon-edit"
            @click="formaterSql(basicInfoForm.sqlMain)"
          ></i>
          <i class="el-icon-video-play"></i>
          <i class="el-icon-video-pause"></i>
          <i class="el-icon-download"></i>
          <i class="el-icon-more-outline"></i>
        </div>
        <div class="sql-box">
          <SqlEditor
            ref="sqleditor"
            :value="basicInfoForm.sqlMain"
            @changeTextarea="changeTextarea($event)"
          />
        </div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="运行日志" name="runningLog">
          <vxe-table height="220" :data="tableData">
            <vxe-column field="name" title="Name"></vxe-column>
            <vxe-column field="sex" title="Sex"></vxe-column>
            <vxe-column field="age" title="Age"></vxe-column>
          </vxe-table>
        </el-tab-pane>
        <el-tab-pane label="结果查看" name="result">结果查看</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import elTree from "@/components/common/tree";
import sqlFormatter from "sql-formatter";
import SqlEditor from "./SqlEditor";
export default {
  name: "app",
  components: {
    elTree,
    SqlEditor
  },
  data() {
    return {
      activeName: "runningLog",
      treeConfig: {
        defaultProps: {
          children: "children",
          label: "label"
        },
        inputShow: true,
        nodeKey: "id",
        moreList: [
          { name: "新建子文件夹", emit: "folder" },
          { name: "新建临时操作", emit: "file" },
          { name: "重命名", emit: "rechristen", condition: true },
          { name: "删除", emit: "del", condition: true }
        ],
        data: [
          {
            label: "数据源组件",
            children: [
              {
                label: "加载数据-1",
                children: [
                  {
                    label: "加载数据 1-1-1"
                  }
                ]
              }
            ]
          },
          {
            label: "数据源组件2",
            children: [
              {
                label: "加载数据2-1",
                children: [
                  {
                    label: "加载数据2-1-1"
                  }
                ]
              },
              {
                label: "加载数据2-2",
                children: [
                  {
                    label: "加载数据2-2-1"
                  }
                ]
              }
            ]
          },
          {
            label: "数据源组件3",
            children: [
              {
                label: "加载数据 3-1",
                children: [
                  {
                    label: "加载数据 3-1-1"
                  }
                ]
              },
              {
                label: "加载数据 3-2",
                children: [
                  {
                    label: "加载数据 3-2-1"
                  }
                ]
              }
            ]
          }
        ]
      },
      basicInfoForm: {
        sqlMain: `insert into scorebak select * from socre where neza='neza'
select *  into scorebak from score  where neza='neza'
SELECT column_name,column_name
FROM table_name
ORDER BY column_name,column_name ASC|DESC;`
      },
      tableData: [
        {
          id: 10001,
          name: "Test1",
          role: "Develop",
          sex: "Man",
          age: 28,
          address: "test abc"
        },
        {
          id: 10001,
          name: "Test1",
          role: "Develop",
          sex: "Man",
          age: 28,
          address: "test abc"
        },
        {
          id: 10001,
          name: "Test1",
          role: "Develop",
          sex: "Man",
          age: 28,
          address: "test abc"
        },
        {
          id: 10001,
          name: "Test1",
          role: "Develop",
          sex: "Man",
          age: 28,
          address: "test abc"
        },
        {
          id: 10002,
          name: "Test2",
          role: "Test",
          sex: "Women",
          age: 22,
          address: "Guangzhou"
        },
        {
          id: 10003,
          name: "Test3",
          role: "PM",
          sex: "Man",
          age: 32,
          address: "Shanghai"
        },
        {
          id: 10004,
          name: "Test4",
          role: "Designer",
          sex: "Women",
          age: 24,
          address: "Shanghai"
        }
      ]
    };
  },
  methods: {
    folderTree(val) {
      console.log(val, "新建子文件夹");
    },
    fileTree(val) {
      console.log(val, "新建临时操作");
    },
    rechristenTree(val) {
      console.log(val, "重命名");
    },
    delTree(val) {
      console.log(val, "删除");
    },
    handleClick() { },
    changeTextarea(val) {
      this.$set(this.basicInfoForm, "sqlMain", val);
    },
    formaterSql() {
      let dom = this.$refs.sqleditor;
      dom.editor.setValue(sqlFormatter.format(dom.editor.getValue()));
    },
    setValue() {
      console.log(this.basicInfoForm);
    }
  }
};
</script>

<style lang="scss" scoped>
.mod-config {
  display: flex;
  justify-content: space-between;
  .aside {
    width: 20%;
  }
  .main {
    width: 79%;
    .sql {
      background: #35384a;
      border-radius: 2px;
      .buttonList {
        font-size: 0.2rem;
        color: #e2e2e2;
        background: #2a2c3d;
        i {
          margin: 0.1rem 0.15rem;
          cursor: pointer;
        }
      }
    }
    .sql-box {
      width: 100%;
      padding: 0.1rem;
    }
    .el-tabs::v-deep {
      .el-tabs__header {
        margin-bottom: 0;
        .el-tabs__nav-wrap {
          padding: 0;
          .el-tabs__nav {
            line-height: 0;
            .el-tabs__item {
              height: 0.23rem;
              line-height: 0.14rem;
            }
          }
        }
      }
      .el-tabs__content {
        .el-tab-pane {
          padding: 0;
        }
        .vxe-table--render-default.border--default .vxe-body--column,
        .vxe-table--render-default.border--default .vxe-footer--column,
        .vxe-table--render-default.border--default .vxe-header--column,
        .vxe-table--render-default.border--inner .vxe-body--column,
        .vxe-table--render-default.border--inner .vxe-footer--column,
        .vxe-table--render-default.border--inner .vxe-header--column {
          font-size: 0.12rem;
          color: #b6c2d7;
          padding: 0.08rem 0;
          background-image: linear-gradient(#1f2b3d, #1f2b3d),
            linear-gradient(#1f2b3d, #1f2b3d);
        }
        .vxe-table--render-default .vxe-table--body-wrapper,
        .vxe-table--render-default .vxe-table--footer-wrapper {
          background-color: transparent;
        }
        .vxe-table--render-default.border--default .vxe-table--header-wrapper,
        .vxe-table--render-default.border--outer .vxe-table--header-wrapper {
          background-color: transparent;
        }
        .vxe-table--header-wrapper .vxe-table--header-border-line {
          border-color: #ffffff24;
        }
        .vxe-table--render-default .vxe-table--border-line {
          border-color: transparent;
        }
      }
    }
  }
}
</style>
